import React, { useState } from 'react';

import { Breadcrumb, Layout, Menu, theme,Button } from 'antd';
import i18n from '../../i18n/i18n'
import { NavLink, Outlet } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { routerHome } from '../../router';
import './index.css'
const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const App = () => {
    const { t, i18n } = useTranslation();
    const romeRouter=(arr)=>{
   let items=[]
   arr&&arr.forEach((item,index)=>{
      items.push(getItem(<NavLink to={`${item.path}?title=${item.title}`}>{item.title}</NavLink>,item.path,item.icon))
   })
   return items
    }
    const items=romeRouter(routerHome)
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const qh=()=>{
    i18n.changeLanguage(i18n.language==='en'?'zh':'en')
  }
  const balck=()=>{
    document.body.classList.toggle('dark')
  }
  const white=()=>{
    document.body.classList.toggle('light')
  }
  return (
    
    <Layout style={{ minHeight: '100vh' }}>
        
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} >
        <Button onClick={balck} style={{float:'left'}}>黑天切换</Button>
         <Button onClick={white} style={{float:'left'}}>白天切换</Button>
        <h1 style={{float:'left'}}>{t('name')}</h1>
      <Button onClick={qh} style={{float:'left'}}>中英文切换</Button>

        </Header>
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default App;
